<template>
  <div class="dashboard-container">
    <div class="boxHead">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>小度</span>
              <div style="float: right; padding: 3px 0">部门：在线运营 角色：管理员</div>
            </div>
            <div>
              <p>修改密码 修改资料</p>
              <p>上次登录时间：2016-07-02 13:34:09</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>消息通知</span>
            </div>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 销售表 -->
    <el-card class="sales-card">
      <!-- <div class="header">
        <el-date-picker
          v-model="datePicker"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2"
        ></el-date-picker>
      </div>-->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>交易金額</span>
        </div>
        <div class="search">
          <!-- 搜索 -->
          <el-form :model="requestParameters" ref="requestParameters">
            <div class="filter-container">
              <el-row :gutter="20">
                <el-col :span="5">
                  <el-form-item label="检索套件：" prop="tags">
                    <el-input
                      @keyup.enter="handleFilter"
                      style="width: 180px;"
                      placeholder="请输入"
                      class="filter-item"
                      v-model="requestParameters.tags"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="检索套件：" prop="tags">
                    <el-input
                      @keyup.enter="handleFilter"
                      style="width: 180px;"
                      placeholder="请输入"
                      class="filter-item"
                      v-model="requestParameters.tags"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="检索套件：" prop="tags">
                    <el-input
                      @keyup.enter="handleFilter"
                      style="width: 180px;"
                      placeholder="请输入"
                      class="filter-item"
                      v-model="requestParameters.tags"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="检索套件：" prop="tags">
                    <el-input
                      @keyup.enter="handleFilter"
                      style="width: 180px;"
                      placeholder="请输入"
                      class="filter-item"
                      v-model="requestParameters.tags"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="5">
                  <el-form-item label="检索套件：" prop="tags">
                    <el-input
                      @keyup.enter="handleFilter"
                      style="width: 180px;"
                      placeholder="请输入"
                      class="filter-item"
                      v-model="requestParameters.tags"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item>
                    <el-button
                      class="filter-item"
                      size="small"
                      type="primary"
                      icon="el-icon-search"
                      @click="handleFilter"
                    >搜索</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div class="chart">
          <line-chart :chartData="lineChartData"></line-chart>
        </div>
      </el-card>
      <!-- <el-tabs v-model="activeName" @tab-click="handleSetLineChartData">
        <el-tab-pane label="交易金額" name="newVisitis"></el-tab-pane>
        <div class="chart">
          <line-chart :chartData="lineChartData"></line-chart>
        </div>
      </el-tabs>-->
    </el-card>
    <!-- 销售表 /-->
  </div>
</template>

<script>
import LineChart from './../components/dashboardLineChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  }
}

export default {
  name: 'dashboard',
  components: {
    LineChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      activeName: 'newVisitis',
      datePicker: '',
      pickerOptions2: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      hotsTableData: [],
      radioArea: '全渠道',
      requestParameters: {
        tags: ''
      }
    }
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type.name]
    },
    // 搜索信息
    handleFilter() {},
    resetForm() {}
  },
  beforeUpdate() {
    
  },
  computed: {},
  // 创建完毕状态
  created() {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.listBox {
  li {
    float: left;
    box-shadow: 0px -2px 5px 2px rgba(122, 117, 119, 0.12);
    margin-right: 12px;
    border-radius: 10px;
  }
  img {
    width: 100%;
  }
}

// 销售额
.sales-card {
  position: relative;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
  .chart {
    widows: 100%;
    height: 450px;
  }
  .table {
    color: rgba(0, 0, 0, 0.65);
    h4 {
      color: #000;
      font-weight: 500;
    }
    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;
      .row {
        margin-bottom: 10px;
      }
    }
    .circular {
      width: 20px;
      height: 20px;
      background-color: #314659;
      color: #fff;
      text-align: center;
      font-size: 12px;
      line-height: 20px;
      font-weight: 600;
      border-radius: 50%;
    }
    .light {
      background-color: #f5f5f5;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
@media screen and (max-width: 1839px) and (min-width: 1520px) {
  .listBox {
    li {
      width: 24%;
    }
  }
}
@media screen and(max-width: 2240px) and (min-width: 1840px) {
  .listBox {
    li {
      width: 19%;
    }
  }
}
</style>
